<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>晨的博客</title>
    <script src="<%=basePath%>../static/jquery/jquery.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="<%=basePath%>../static/layui/layui.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../static/layui/css/layui.css">
    <script src="<%=basePath%>../static/bootstrap/js/bootstrap.min.js"></script>

    <script src="<%=basePath%>../static/editor.md/lib/marked.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/prettify.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/raphael.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/underscore.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/sequence-diagram.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/flowchart.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/lib/jquery.flowchart.min.js"></script>
    <script src="<%=basePath%>../static/editor.md/editormd.js"></script>
    <link rel="stylesheet" href="<%=basePath%>../common/css/animate.css">
</head>

<style type="text/css">

    *{
        margin: 0 auto;
        padding: 0;
    }

    body{
        background: url("<%=basePath%>../static/image/main_bg.jpg");
        background-size: cover;
    }


    .top{
        position:fixed;
        top: 0;
        width: 100%;
        height: 75px;
        background-color: #848484;
        z-index: 9999;
        opacity: 0.8;
    }


    .topFont{
        line-height: 75px;
        font-size: 28px;
        font-family: Consolas;
        color: rgba(255,255,255,.7);
        font-weight: bold;


    }
    .topFont a{
        text-decoration: none;
        text-align: center;
        color: #9c3328;
        font-size: 19px;

    }

    .topA{
        height: 75px;
        width: 100px;
        text-align: center;

    }
    .topA:hover{

        background: powderblue;
        opacity: 0.9;
        color: black;
    }

    .first{
        margin-top: 80px;
    }
    .arc{

        height: 200px;
        margin-top: 20px;
        border-radius: 10px;
        box-shadow: 1px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        background-color: snow;
        opacity: 0.85;

    }
    .arc:hover{
        transform: scale(1.01);
        /* box-shadow: 5px 8px 4px 3px #f7f7f7;*/
    }


    .type{
        position: relative;
        display: inline-block;
        width: 100px;
    }

    .down-child{
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 100px;

        box-shadow: 0px 8px 16px  rgba(0,0,0,0.2);

    }
    .down-child a{

        color: saddlebrown;
        font-weight: normal;
        text-decoration: none;
        display: block;
        height: 45px;
        line-height: 45px;

    }

    /* 悬停时显示下拉菜单 */
    .type:hover .down-child {
        display: block;
    }

    .down-child a:hover{
        background-color: gainsboro;
    }

    .rightA{
        height: 270px;
        border-radius: 10px;
        margin-top: 100px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        background-color: snow;
        opacity: 0.85;

    }
    .rightA:hover {
        transform: scale(1.01);
    }

    .recentArc{
        height: 360px;
        border-radius: 10px;
        margin-top: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        background-color: snow;
        opacity: 0.85;
    }
    .recentArc:hover{
        transform: scale(1.01);
    }

    .pages{
        padding-top: 20px;
        height: 50px;
    }

    .pageList{
        text-align: center;
        line-height: 40px;
        width: 100px;
        height: 40px;
        border-radius: 8px;
        float: left;
        margin: 5px;
        background-color: rgba(255,255,255,.9);
        box-shadow: 0 1px 2px ;
    }
    .pageList a{
        text-decoration: none;
        color: black;
    }

    .pageList:hover{
        background-color: #428bca;
        color:gainsboro;
    }





    .bottomMsg{
        height: 200px;
        width: 100%;
        background-color: #1b1c1d;
        margin-top:10px;
        text-align: center;
        line-height: 100px;
        color: white;
        opacity: 0.85;

    }


    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width:12px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
        border-radius:10px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(0,0,0,0.1);
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background:rgba(255,0,0,0.4);
    }


    .arc_show{
        margin-left: 25px;
        margin-top: 10px;
        height: 180px;
        width: 350px;
        font-weight: bold;
        font-family: 华文宋体;

        float: left;

        border-radius: 10px;

    }

    .a_Title{
        height: 42px;
        font-size: 21px;

    }
    .a_Title a{
        text-decoration: none;
        color: black;
        font-family: 华文宋体;
        font-weight: bold;
    }
    .a_Title  a:hover{
        text-decoration: none;
        color: #1b6d85;
    }

    .a_des{
        margin-top: 16px;
        height: 65px;
        font-size: 16px;

        color: #707070;
        overflow: hidden;
        text-overflow:inherit;

        display:-webkit-box;
        /*控制在3行*/
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
    }


    .readMore{
        margin-top: 5px;
        text-align: center;
        height: 30px;
        width: 100px;
        line-height: 30px;
        border: 2px #1e73be solid;
    }

    .readMore:hover{
        transform: scale(1.01);
        color: rosybrown;
        border-color:rosybrown ;
    }

    .recentArc_hot {
        height: 50px;
        text-align: center;
        padding: 10px;
        line-height: 40px;
        font-family: 华文宋体;
        font-size: 18px;
        font-weight: bolder;
    }

    .recentArc_content{
        height: 50px;
        line-height: 50px;
        color: #4d4e53;
        font-size: 16px;
        border-bottom: 1px slategrey dashed;
        margin-top: 5px;
        padding-left: 20px;
        font-family: 华文宋体;
        text-decoration: none;
    }

    .recentArc_content:hover{
        background-color: lightgrey;
        color: #1b1c1d;


    }




</style>

<body>

<%--top开始--%>
<div class="layui-fluid top" >
    <div class="layui-col-md12">
        <div class="layui-container">
            <div class="layui-col-md4 topFont">
                <span>chen&nan|blog</span>
            </div>
            <div class="layui-col-md7 topFont layui-col-md-offset1">
                <div class="layui-fluid">
                    <div class="layui-col-md3">
                        <div class="topA" >
                            <a href="${pageContext.request.contextPath}/index.jsp" class=" layui-icon layui-icon-home" style="color: #9c3328" > 主页</a>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="topA">
                            <a href="#" class=" layui-icon layui-icon-tabs" > 归档</a>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="topA">
                            <a href="#" class=" layui-icon layui-icon-about" > 关于</a>

                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="topA">
                            <div class="type">

                                <a href="#" class=" layui-icon layui-icon-down" > 分类</a>
                                <div class="down-child"> <!-- 二级菜单 -->
                                    <c:forEach var="type" items="${types}">
                                        <a href="${pageContext.request.contextPath}/article/article_type/0/${type.type_id}">${type.type_name}</a>
                                    </c:forEach>

                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<%--top结束--%>

<%--正文开始 --左边--%>
<div class="layui-container">

    <div class="layui-col-md7 first">
        <c:forEach items="${articles}" var="article">
            <div class="arc animate__bounceInLeft" >

                    <%--left--%>
                <div style="float: left" >
                    <a href="${pageContext.request.contextPath}/article/articleDetail/${article.getArticle().article_id}"> <img src="<%=basePath%>${article.getArticle().article_picture}" height="180px" width="270px" style=" border-radius: 8px;margin-top: 10px;margin-left: 10px">
                    </a>
                </div>

                    <%--right--%>

                <div class="arc_show" style="float: left">
                    <div class="a_Title" >
                        <p><a href="${pageContext.request.contextPath}/article/articleDetail/${article.getArticle().article_id}">${article.getArticle().article_title}</a></p>
                    </div>
                    <div class="a_des">
                        <p>${article.getArticle().article_description}</p>
                    </div>
                    <a href="${pageContext.request.contextPath}/article/articleDetail/${article.getArticle().article_id}" style=" text-decoration: none;
            color: #1e73be;"><div class="readMore">
                        Read more ➜
                    </div></a>

                    <div style="padding-right: 10px;float: right;padding-top: 8px;color: #4d4e53;">
                        <p> 类别：<a href="${pageContext.request.contextPath}/article/article_type/0/${article.getType().type_id}" style="text-decoration: none;color: forestgreen"> ${article.getType().type_name}</a>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：${article.getArticle().article_data}</p>
                    </div>
                </div>

            </div>
        </c:forEach>
        <c:if test="${pageInfo.getTotal()<5}">
            <div style="padding-top: 30px;text-align: center;font-family: 华文细黑;color: whitesmoke;font-size: 18px">
                <p>
                    ~暂时没有更多了哦~
                </p>
            </div>
        </c:if>



    </div>


    <%--正文开始 --右边--%>
    <div class="layui-col-md4 layui-col-md-offset1 animate__bounceInRight" >

        <div class="rightA">
            <div style="text-align: center;padding-top: 60px">
                <img src="<%=basePath%>../static/image/头像.jpg" width="100px" height="100px" style="border-radius:100%">
                <p style="padding-top: 10px;font-family: 华文宋体;font-size: 16px">欢迎来到晨的小博客</p>
            </div>

        </div>

        <div class="recentArc ">
            <div class="recentArc_hot ">
                <p >
                    近期文章
                </p>
            </div>
            <c:forEach var="rencentArc" items="${recentList}" begin="0" end="4">
            <a href="${pageContext.request.contextPath}/article/articleDetail/${rencentArc.article_id}" style="text-decoration: none">
            <div class="recentArc_content">
                    <p class="layui-icon layui-icon-link">
                        &nbsp;&nbsp;
                        ${rencentArc.article_title}
                    </p>
            </div>
            </a>
            </c:forEach>


        </div>
        <div class="recentArc" style="height:410px">
            近期评论
        </div>

    </div>
    <div class="layui-col-md7" style="margin-left: 200px" >

        <%--类型查找博客--%>
        <c:choose>
            <c:when test="${pageInfo.getTotal()>5&&status=='2'}">
                <div class="pages" style="text-align: center;margin-left: 20px">
                    <c:choose>
                        <c:when test="${pageInfo.isFirstPage}">
                            <a  title="已经第一页了哦~" >
                                <div class="pageList" >
                                    上一页
                                </div>
                            </a>
                        </c:when>
                        <c:otherwise>
                            <a href="${pageContext.request.contextPath}/article/article_type/${pageInfo.pageNum-1}/${type_id}" title="当前第${pageInfo.pageNum}页">
                                <div class="pageList">
                                    上一页
                                </div>
                            </a>
                        </c:otherwise>
                    </c:choose>
                    <c:choose>
                        <c:when test="${pageInfo.isLastPage}">
                            <a  title="已经最后一页了哦~" >
                                <div class="pageList" >
                                    下一页
                                </div>
                            </a>
                        </c:when>
                        <c:otherwise>
                            <a href="${pageContext.request.contextPath}/article/article_type/${pageInfo.pageNum+1}/${type_id}" title="当前第${pageInfo.pageNum}页">
                                <div class="pageList" >
                                    下一页
                                </div>
                            </a>
                        </c:otherwise>
                    </c:choose>

                </div>
            </c:when>
        </c:choose>
        <%--所有博客列表--%>
        <c:choose>
            <c:when test="${pageInfo.getTotal()>5&&status=='1'}">
        <div class="pages" style="text-align: center;margin-left: 20px">
            <c:choose>
                <c:when test="${pageInfo.isFirstPage}">
            <a  title="已经第一页了哦~" >
                <div class="pageList" >
                    上一页
                </div>
            </a>
                </c:when>
                <c:otherwise>
                    <a href="${pageContext.request.contextPath}/index/${pageInfo.pageNum-1}" title="当前第${pageInfo.pageNum}页">
                        <div class="pageList">
                            上一页
                        </div>
                    </a>
                </c:otherwise>
            </c:choose>
            <c:choose>
                <c:when test="${pageInfo.isLastPage}">
                    <a  title="已经最后一页了哦~" >
                        <div class="pageList" >
                            下一页
                        </div>
                    </a>
                </c:when>
                <c:otherwise>
                    <a href="${pageContext.request.contextPath}/index/${pageInfo.pageNum+1}" title="当前第${pageInfo.pageNum}页">
                        <div class="pageList" >
                            下一页
                        </div>
                    </a>
                </c:otherwise>
            </c:choose>

        </div>
            </c:when>
        </c:choose>
    </div>
</div>

<%--中间结束--%>

<%--底部开始--%>

<div class="layui-col-md12 bottomMsg">
    <div>please bottom
    </div>
</div>


<script>

</script>
</body>
</html>
